<template>
  <transition name="tm-dialog-zoom" >
    <div class="tm-dialog" v-show="currVisible">
      <div class="tm-dialog__mask"></div>
      <div class="tm-dialog__wrap">
        <div class="tm-dialog__position tm-dialog--top">

          <div class="tm-dialog--main tm-dialog--default tm-dialog__modal-default"
               :style="style">
            <div class="tm-dialog__header">
              <div class="tm-dialog__header-content">
                <slot name="title">
                  <div style="text-align: center; width: 100%;">{{title}}</div>
                </slot>
              </div>
              <div class="tm-dialog__close" @click="onCancel">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <div class="tm-dialog__body">
              <slot>
                <component :is="comp"
                           v-if="currVisible"
                           v-bind="props"
                           @cancel="onCancel"
                           @on-ok="onOK" />
              </slot>
            </div>
            <div class="tm-dialog__footer">
              <slot name="footer"></slot>
            </div>
          </div>

        </div>
      </div>
    </div>
  </transition>

</template>

<script>
export default {
  name: 'simple-dialog2',
  cnName: 'simple-dialog2',
  props: {
    title: String,
    width: String,
    height: String,
    comp: {
      type: Object,
      default: null
    },
    visible: {
      type: Boolean
    },
    props: Object,
    origin: Object
  },
  data() {
    return {
      currVisible: this.visible
    }
  },
  watch: {
    currVisible(val) {
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.currVisible = val
    }
  },
  computed: {
    style() {
      const rtn = {width: this.width, height: this.height}
      if(this.origin) {
        rtn.transformOrigin = `${this.origin.x}px ${this.origin.y}px`
      }
      return rtn
    }
  },
  methods: {
    onOK(data, refresh) {
      this.$emit('on-ok', data, refresh)
    },
    onCancel() {
      this.currVisible = false
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less">
.tm-dialog {
  pointer-events: auto;
  outline: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed !important;
  z-index: 500;
  --td-mask-active: rgba(0,0,0,0.4);
  --td-text-color-primary: #FFF;
  cursor: default;

  &__mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--td-mask-active);
    pointer-events: auto;
  }
  &__wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: auto;
  }
  &__position {
    display: flex;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    position: relative;
    padding: 48px 0;
    box-sizing: border-box;

    &.tm-dialog--top {
      align-items: flex-start;
      padding-top: 10vh;
    }
  }
  &--main {
    font: 14px / 22px "PingFang SC", "Microsoft YaHei", "Arial Regular";
    color: var(--td-text-color-primary);
    box-sizing: border-box;
    margin: 0;
    padding: 32px;
    list-style: none;
    width: 450px;
    background-color: #242424;
    position: relative;
    border: 1px solid #393939;
    border-radius: 9px;
  }
  &__header {
    color: var(--td-text-color-primary);
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;

    &-content {
      display: flex;
      align-items: flex-start;
      width: 100%;
    }
  }
  &__close {
    font-size: 20px;
    color: var(--td-text-color-primary);
    display: flex;
    padding: 2px;
  }
  &__body {
    padding: 16px 0;
    word-break: break-word;
    position: relative;
  }
  &__footer {
    text-align: right;
  }

  .editor-layout {
    position: relative !important;
    height: auto !important;

    &__footer {
      position: relative !important;
      border-top: 0 !important;
      bottom: -25px !important;
    }
    &__main {
      overflow-y: initial !important;
    }
  }
}

.tm-dialog-zoom-enter-active,
.tm-dialog-zoom-leave-active {
  transition: all .3s cubic-bezier(.55,0,.1,1);
  .tm-dialog__mask {
    transition: all .3s cubic-bezier(.55,0,.1,1);
  }
  .tm-dialog--main {
    transition: all .3s cubic-bezier(.55,0,.1,1);
  }
}
.tm-dialog-zoom-enter,
.tm-dialog-zoom-leave-active {
  .tm-dialog__mask {
    opacity: 0;
  }
  .tm-dialog--main {
    opacity: 0;
    transform: scale(.01)
  }
}

</style>
